<template>
    <section style=" background:#fff;">
        <div class="welcome-word-box">
            欢迎使用后台管理系统
        </div>
        <div class="count-all-box">
            <a-row :gutter="16">
                <a-col class="gutter-row"
                       :span="6">
                    <div class="gutter-box">
                        <a-card style="width: 250px">
                            <div class="web-info-title"><b>网站访问量：</b></div>
                            <div class="web-info-number"> {{viewCount}}</div>
                        </a-card>
                    </div>
                </a-col>
                <a-col class="gutter-row"
                       :span="6">
                    <div class="gutter-box">
                        <a-card style="width: 250px">
                            <div class="web-info-title"><b>注册用户：</b></div>
                            <div class="web-info-number">{{userCount}}</div>
                        </a-card>
                    </div>
                </a-col>
                <a-col class="gutter-row"
                       :span="6">
                    <div class="gutter-box">
                        <a-card style="width: 250px">
                            <div class="web-info-title"><b>文章总数：</b></div>
                            <div class="web-info-number">{{articleCount}}</div>
                        </a-card>
                    </div>
                </a-col>
                <a-col class="gutter-row"
                       :span="6">
                    <div class="gutter-box">
                        <a-card style="width: 250px">
                            <div class="web-info-title"><b>评论总数：</b></div>
                            <div class="web-info-number">{{commentCount}}</div>
                        </a-card>
                    </div>
                </a-col>
            </a-row>
        </div>
        <div class="other-util-box">
            <a-row>
                <div class="comment-lasted-box">
                    <a-col :span="8">
                        <a-card title="最新评论"
                                style="width: 500px;height:400px">
                            <a-button type="link"
                                      slot="extra"
                                      @click="toCommentMore">更多>></a-button>
                            <a-table ref="table"
                                     :loading='loading'
                                     :columns="columns"
                                     rowKey="id"
                                     :data-source="tbList"
                                     :pagination="false">
                                <span slot="avatar"
                                      slot-scope="text">
                                    <a-avatar :src="text" />
                                </span>
                            </a-table>
                        </a-card>
                    </a-col>
                </div>
                <div>
                    <a-col :span="8"
                           :offset="5">
                        <a-card title="快捷操作"
                                style="width: 500px;height:400px">
                            <div class="fast-way-list">
                                <div class="fast-way-item">
                                    <router-link to="/content/post-article">
                                        <a-icon type="edit" />写文章
                                    </router-link>
                                </div>
                                <div class="fast-way-item">
                                    <router-link class="el-icon-warning-outline"
                                                 to="/settings/web-size-info"> 修改网站信息</router-link>
                                </div>
                                <div class="fast-way-item">
                                    <router-link class="el-icon-link"
                                                 to="/settings/friend-link"> 编辑友情链接</router-link>
                                </div>
                                <div class="fast-way-item">
                                    <router-link class="el-icon-picture-outline-round"
                                                 to="/operation/loop"> 轮播图管理</router-link>
                                </div>
                            </div>
                        </a-card>
                    </a-col>
                </div>
            </a-row>
        </div>
    </section>
</template>

<script>
import { getUserCount, getCommentCount, getViewCount, getArticleCount, listComments } from '@/api/api'
const columns = [
    {
        title: '内容',
        dataIndex: 'content',
        align: 'left',
        width: 150,
        ellipsis: true,
    },
    {
        title: '用户信息',
        colSpan: 2,
        dataIndex: 'fromAvatar',
        align: 'center',
        scopedSlots: { customRender: 'avatar' },
    },
    {
        title: '用户名',
        colSpan: 0,
        dataIndex: 'fromName',
        align: 'left',
    }
];
export default {
    data() {
        return {
            columns,
            tbList: [],
            loading: false,
            viewCount: 0,
            commentCount: 0,
            articleCount: 0,
            userCount: 0
        }
    },
    methods: {
        toCommentMore() {
            this.$router.push({
                path: '/content/manage-comment'
            });
        },
        getCommentList() {
            listComments(1, 4).then(res => {
                if (res.code === 200) {
                    this.loading = false;
                    this.tbList = res.data.records;
                }
            })
        },
        listCount() {
            getArticleCount().then(result => {
                if (result.code === 200) {
                    this.articleCount = result.data;
                }
            });
            getUserCount().then(result => {
                if (result.code === 200) {
                    this.userCount = result.data;
                }
            });
            getCommentCount().then(result => {
                if (result.code === 200) {
                    this.commentCount = result.data;
                }
            });
            getViewCount().then(result => {
                if (result.code === 200) {
                    this.viewCount = result.data.web_size_view_count;
                }
            });
        }
    },
    mounted() {
        this.listCount();
        this.getCommentList();
    },

}
</script>

<style scoped>
.other-util-box {
    height: 500px;
}
.fast-way-item a {
    color: #1e90ff;
}
.fast-way-item {
    padding: 10px;

    font-size: 16px;
    margin-bottom: 5px;
}
.count-all-box {
    margin-bottom: 30px;
}
.welcome-word-box {
    padding: 10px;
}
.gutter-box {
    padding: 5px 0;
}

.web-info-title {
    text-align: center;
    padding: 20px;
    font-size: 20px;
}

.web-info-number {
    text-align: center;
    color: dodgerblue;
    font-size: 36px;
    font-weight: 600;
}
</style>